import React from 'react'
import { NavLink, Route, Switch, Redirect } from 'react-router-dom'
import './index.scss'
import Recommend from '../Recommend'
import Ranking from '../Ranking'
import SingList from '../Singlist'

export default function FindMusic() {
  return (
    <div className='findmusic d-flex'>
      <ul className='nav flex-column bg-light me-3'>
        <li className='nav-item'>
          <NavLink
            className='nav-link'
            aria-current='page'
            to='/findmusic/recommend'
          >
            推荐
          </NavLink>
        </li>
        <li className='nav-item'>
          <NavLink className='nav-link' to='/findmusic/ranking?id=bsb'>
            排行榜
          </NavLink>
        </li>
        <li className='nav-item'>
          <NavLink className='nav-link' to='/findmusic/singlist'>
            歌单
          </NavLink>
        </li>
      </ul>
      <div className='flex-grow-1'>
        <Switch>
          <Redirect exact from='/findmusic' to='/findmusic/recommend' />
          <Route path='/findmusic/recommend' component={Recommend} />
          <Route path='/findmusic/ranking' component={Ranking} />
          <Route path='/findmusic/singlist' component={SingList} />
        </Switch>
      </div>
    </div>
  )
}
